<template>
  <div class="bridgeCard">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="一般资料" name="first">
          <div class="initContent">
              <div class="initLine">
                  <p>管理单位: <span>{{data.bridgeCardBasicInfo.manageUnit}}</span></p>
                  <p>养护单位: <span>{{data.bridgeCardBasicInfo.maintainUnit}}</span></p>
              </div>
              <div class="initLine">
                  <p>建设单位: <span>{{data.bridgeCardBasicInfo.buildUnit}}</span></p>
                  <p>设计单位: <span>{{data.bridgeCardBasicInfo.designUnit}}</span></p>
              </div>
              <div class="initLine">
                  <p>监理单位: <span>{{data.bridgeCardBasicInfo.supervisingUnit}}</span></p>
                  <p>施工单位: <span>{{data.bridgeCardBasicInfo.constructionUnit}}</span></p>
              </div>
              <div class="initLine">
                  <p>建成年月: <span>{{data.bridgeCardBasicInfo.buildDate}}</span></p>
                  <p>总造价: <span>{{data.bridgeCardBasicInfo.totalCost}}</span></p>
              </div>
              <div class="initLine">
                  <p>养护类别: <span>{{data.bridgeCardBasicInfo.maintainType}}</span></p>
                  <p>养护等级: <span>{{data.bridgeCardBasicInfo.maintainLevel}}</span></p>
              </div>
              <div class="initLine">
                  <p>道路等级: <span>{{data.bridgeCardBasicInfo.roadLevel}}</span></p>
                  <p>结构类型: <span>{{data.bridgeCardBasicInfo.StructType}}</span></p>
              </div>
              <div class="initLine">
                  <p>设计荷载: <span>{{data.bridgeCardBasicInfo.designLoad}}</span></p>
                  <p>限载标准: <span>{{data.bridgeCardBasicInfo.limitLoadStandard}}</span></p>
              </div>
              <div class="initLine">
                  <p>抗震烈度: <span>{{data.bridgeCardBasicInfo.seismicFortificationIntensity}}</span></p>
                  <p>正斜交角: <span>{{data.bridgeCardBasicInfo.angle}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥梁跨数: <span>{{data.bridgeCardBasicInfo.bridgeSpanNumber}}</span></p>
                  <p>跨径组合: <span>{{data.bridgeCardBasicInfo.spanGroup}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥面面积: <span>{{data.bridgeCardBasicInfo.bridgeDeckArea}}</span></p>
                  <p>桥梁总长: <span>{{data.bridgeCardBasicInfo.bridgeLength}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥梁总宽: <span>{{data.bridgeCardBasicInfo.bridgeWidth}}</span></p>
                  <p>车行道净宽: <span>{{data.bridgeCardBasicInfo.roadwayClearWidth}}</span></p>
              </div>
              <div class="initLine">
                  <p>人行道净宽: <span>{{data.bridgeCardBasicInfo.sidewayClearWidth}}</span></p>
                  <p>河道等级: <span>{{data.bridgeCardBasicInfo.riverwayLevel}}</span></p>
              </div>
              <div class="initLine">
                  <p>最高水位: <span>{{data.bridgeCardBasicInfo.waxWaterLevel}}</span></p>
                  <p>常水位: <span>{{data.bridgeCardBasicInfo.waterLevel}}</span></p>
              </div>
          </div>
      </el-tab-pane>
      <el-tab-pane label="上部结构" name="second">
           <div class="initContent">
              <div class="initLine">
                  <p>主梁形式: <span>{{data.bridgeCardSuperStructure.mainGirderForm}}</span></p>
                  <p>主梁尺寸: <span>{{data.bridgeCardSuperStructure.mainBeamWidth}}</span></p>
              </div>
              <div class="initLine">
                  <p>主梁数量: <span>{{data.bridgeCardSuperStructure.mainBeamNumber}}</span></p>
                  <p>横梁形式: <span>{{data.bridgeCardSuperStructure.CrossBeamForm}}</span></p>
              </div>
              <div class="initLine">
                  <p>主垮桥下净宽: <span>{{data.bridgeCardSuperStructure.mainSpanWidth}}</span></p>
                  <p>桥下限高: <span>{{data.bridgeCardSuperStructure.bridgeBelowRestrictHeight}}</span></p>
              </div>
              <div class="initLine">
                  <p>拱桥矢跨比: <span>{{data.bridgeCardSuperStructure.archBridgeRiseSpanRatio}}</span></p>
                  <p>支座形式: <span>{{data.bridgeCardSuperStructure.SupportForm}}</span></p>
              </div>
              <div class="initLine">
                  <p>支座数量: <span>{{data.bridgeCardSuperStructure.SupportNumber}}</span></p>
                  <p>桥面结构: <span>{{data.bridgeCardSuperStructure.bridgeFloorStruct}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥面铺装厚度: <span>{{data.bridgeCardSuperStructure.bridgeFloorMatFormationThickness}}</span></p>
                  <p>伸缩缝型式: <span>{{data.bridgeCardSuperStructure.ExpansionJointForm}}</span></p>
              </div>
              <div class="initLine">
                  <p>伸缩缝数量: <span>{{data.bridgeCardSuperStructure.MainBridgeLongitudinalSlope}}</span></p>
                  <p>主桥纵坡: <span>{{data.bridgeCardSuperStructure.MainBridgeLongitudinalSlope}}</span></p>
              </div>
               <div class="initLine">
                  <p>主桥横坡: <span>{{data.bridgeCardSuperStructure.MainBridgeCrossSlope}}</span></p>
                  <p>引桥纵坡: <span>{{data.bridgeCardSuperStructure.ApproachBridgeLongitudinalSlope}}</span></p>
              </div>
              <div class="initLine">
                  <p>引桥横坡: <span>{{data.bridgeCardSuperStructure.ApproachBridgeCrossSlope}}</span></p>
                  <p>集水口尺寸: <span>{{data.bridgeCardSuperStructure.waterIntakeSize}}</span></p>
              </div>
              <div class="initLine">
                  <p>集水口数量: <span>{{data.bridgeCardSuperStructure.waterIntakeNumber}}</span></p>
              </div>
          </div>
      </el-tab-pane>
      <el-tab-pane label="下部结构" name="third">
           <div class="initContent">
              <div class="initLine">
                  <p>桥墩形式: <span>{{data.bridgeCardPier.pierForm}}</span></p>
                  <p>桥墩数量: <span>{{data.bridgeCardPier.pierNumber}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥墩标高: <span>{{data.bridgeCardPier.pierElevation}}</span></p>
                  <p>盖梁尺寸: <span>{{data.bridgeCardPier.pierCapSize}}</span></p>
              </div>
              <div class="initLine">
                  <p>基底标高: <span>{{data.bridgeCardPier.pierBaseElevation}}</span></p>
                  <p>底板尺寸: <span>{{data.bridgeCardPier.pierFloorSize}}</span></p>
              </div>
              <div class="initLine">
                  <p>基桩尺寸: <span>{{data.bridgeCardPier.pierPileSize}}</span></p>
                  <p>基桩根数: <span>{{data.bridgeCardPier.pierPileNumber}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥台形式: <span>{{data.bridgeCardAbutment.abutmentForm}}</span></p>
                  <p>桥台数量: <span>{{data.bridgeCardAbutment.abutmentNumber}}</span></p>
              </div>
              <div class="initLine">
                  <p>桥台标高: <span>{{data.bridgeCardAbutment.abutmentElevation}}</span></p>
                  <p>基底标高: <span>{{data.bridgeCardAbutment.abutmentBaseElevation}}</span></p>
              </div>
              <div class="initLine">
                  <p>台帽尺寸: <span>{{data.bridgeCardAbutment.abutmentCapSize}}</span></p>
                  <p>底板尺寸: <span>{{data.bridgeCardAbutment.abutmentFloorSize}}</span></p>
              </div>
              <div class="initLine">
                  <p>基桩尺寸: <span>{{data.bridgeCardAbutment.abutmentPileSize}}</span></p>
                  <p>基桩根数: <span>{{data.bridgeCardAbutment.abutmentPileNumber}}</span></p>
              </div>
              <div class="initLine">
                  <p>挡土板厚度: <span>{{data.bridgeCardAbutment.abutmentRetainingPlankThickness}}</span></p>
                  <p>翼墙形式: <span>{{data.bridgeCardAbutment.abutmentWallForm}}</span></p>
              </div>
              <div class="initLine">
                  <p>翼墙长度: <span>{{data.bridgeCardAbutment.abutmentWallLength}}</span></p>
              </div>
          </div>
      </el-tab-pane>
      <el-tab-pane label="附属工程" name="fourth">
           <div class="initContent">
              <div class="initLine">
                  <p>泄水管尺寸: <span>{{data.bridgeCardAffiliateProject.downspoutsSize}}</span></p>
                  <p>泄水管长度: <span>{{data.bridgeCardAffiliateProject.downspoutsLength}}</span></p>
              </div>
              <div class="initLine">
                  <p>栏杆总长: <span>{{data.bridgeCardAffiliateProject.railLength}}</span></p>
                  <p>栏杆结构: <span>{{data.bridgeCardAffiliateProject.railStruct}}</span></p>
              </div>
              <div class="initLine">
                  <p>端柱尺寸: <span>{{data.bridgeCardAffiliateProject.endPostSize}}</span></p>
                  <p>护岸类型: <span>{{data.bridgeCardAffiliateProject.revetmentType}}</span></p>
              </div>
              <div class="initLine">
                  <p>引坡挡墙类型: <span>{{data.bridgeCardAffiliateProject.slopeWallType}}</span></p>
              </div>
          </div>
      </el-tab-pane>
      <el-tab-pane label="附挂管线" name="five">
           <div class="initContent">
              <div class="initLine">
                  <p>给水管: <span>{{data.bridgeCardAffiliatePipeline.waterPipe}}</span></p>
                  <p>燃气管: <span>{{data.bridgeCardAffiliatePipeline.gasPipe}}</span></p>
              </div>
              <div class="initLine">
                  <p>电力缆: <span>{{data.bridgeCardAffiliatePipeline.powerCable}}</span></p>
                  <p>通信电缆: <span>{{data.bridgeCardAffiliatePipeline.communicationCable}}</span></p>
              </div>
          </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
    name: 'BridgeCard',
    props:{
        data:{
            type: Object,
            default(){
                return {}
            }
        }
    },
  data() {
    return {
         activeName: 'first',
         mainList: [
        {
            label:'Ⅰ类养护',
            value:'0'
        },
        {
            label:'Ⅱ类养护',
            value:'1'
        },
        {
            label:'Ⅲ类养护',
            value:'2'
        },
        {
            label:'Ⅳ类养护',
            value:'3'
        },
        {
            label:'Ⅴ类养护',
            value:'4'
        }
      ],
      typeList: [],
      typeList1: [
        {
            value: '0',
            label: '合格级'
        },
        {
            value: '1',
            label: '不合格级'
        },
      ],
      typeList2:[
        {
            value: '0',
            label: 'A级'
        },
        {
            value: '1',
            label: 'B级'
        },
        {
            value: '2',
            label: 'C级'
        },
        {
            value: '3',
            label: 'D级'
        },
        {
            value: '4',
            label: 'E级'
        }
      ],
    };
  },
  created() {
      this.text()
  },
  watch:{
      'data.bridgeCardBasicInfo':{
          handler(val,old) {
              if(val.maintainType) {
                  this.text()
              }
          }
      }
  },
  methods:{
       handleClick(tab, event) {
        // console.log(tab, event);
      },
      text(){
          if(this.data.bridgeCardBasicInfo.maintainType) {
          this.mainList.map(v => {
              if(v.value === this.data.bridgeCardBasicInfo.maintainType) {
                  this.data.bridgeCardBasicInfo.maintainType = v.label
              }
          })
          if(this.data.bridgeCardBasicInfo.maintainType === '0') {
              this.typeList = this.typeList1
          } else{
              this.typeList = this.typeList2
          }
          if(this.data.bridgeCardBasicInfo.maintainLevel) {
              this.typeList.map(v => {
                  if(v.value === this.data.bridgeCardBasicInfo.maintainLevel) {
                      this.data.bridgeCardBasicInfo.maintainLevel = v.label
                  }
              })
          }
      }
      }
  }
};
</script>

<style lang="scss" scoped>
.bridgeCard {
  width: 100%;
  height: calc(100% - 15px);
  padding-top:15px;
  box-sizing: border-box;
}
.initContent{
width:100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
.initLine{
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    line-height: 44px;
    p{
        width: 45%;
        padding-left: 80px;
        color: #999999;
        font-size: 14px;
        span{
            color:#333333;
            margin-left: 18px;
        }
    }
}
}
</style>
